{include file="public/head"/}
<script language="javascript">
	function list_normal(){
		$(".option-pulloff").each(function(){
			$(this).show();
		});

		$(".option-del").each(function(){
			$(this).hide();
		});

		$(".option-recover").each(function(){
			$(this).hide();
		});

		$(".option-clear").each(function(){
			$(this).hide();
		});
	}
	

	$(document).ready(function() {
		
		modalSetting("prosModal"); //设置modal垂直居中
		
		list_normal();


		$("#list-normal").click(function(){
			list_normal();
		});

		$("#list-all").click(function(){
			list_normal();
		});
		
		
		$("#list-pulloff").click(function(){
			$(".option-pulloff").each(function(){
				$(this).hide();
			});

			$(".option-del").each(function(){
				$(this).show();
			});

			$(".option-recover").each(function(){
				$(this).hide();
			});

			$(".option-clear").each(function(){
				$(this).hide();
			});

		});
	
		$("#list-del").click(function(){
			$(".option-pulloff").each(function(){
				$(this).hide();
			});

			$(".option-del").each(function(){
				$(this).hide();
			});

			$(".option-recover").each(function(){
				$(this).show();
			});
			
			$(".option-clear").each(function(){
				$(this).show();
			});
		});

	});
</script>
<div class="container-fluid">

  <div class="row clearfix">
    <div class="col-md-12 column">
      <div class="alert alert-dismissable alert-info">
        <button type="button" class="close">×</button>
        <h4> 信息框 </h4>
         * 清除：只限于没有订单的产品</div>
    </div>
   </div>
   
   
  <div class="ntDesktop"> 
  <div class="ntDesktop-head">客户分类列表</div>
  
  
  <div class="row clearfix">
    <div class="col-md-6 col-md-offset-6 col-sm-8 col-sm-offset-4 column text-right">
    	<div>
        <form class="form-inline" role="form">        
          <div class="form-group">
            <label for="name">search{:lang('add/alterar_bank_account')}</label>
            <input type="text" class="form-control" id="name" placeholder="{:lang("enter_product_name,_code_or_model")}">
          </div>
          <div class="form-group">
              <button type="submit" class="btn btn-default">{:lang('search')}</button>
          </div>
        </form>
        </div>
    </div>
  </div>
   
   
   <div class="row clearfix" style="padding-top:12px">
    <div class="col-md-6 column">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#home" data-toggle="tab" id="list-all">{:lang('all')}</a>
            </li>
            <li>
            	<a href="#home" data-toggle="tab" id="list-normal">{:lang('normal')}</a>
            </li>
            <li>
            	<a href="#home" data-toggle="tab" id="list-pulloff">{:lang("off_the_shelf")}</a>
            </li>
            <li>
            	<a href="#home" data-toggle="tab" id="list-del">{:lang('delete')}</a>
            </li>
        </ul>
    </div>
    <div class="col-md-6 column text-right">
    	<div>
        	<button type="button" class="btn btn-primary">添加新产品</button>
            <span style="padding:10px">&nbsp;</span>
            <button type="button" class="btn btn-default">{:lang('batch_adjustment')}</button>
            <button type="button" class="btn btn-default option-pulloff">批量{:lang("off_the_shelf")}</button>
            <button type="button" class="btn btn-default option-del">{:lang('batch_delete')}</button>
            <button type="button" class="btn btn-default option-recover">{:lang('batch_recovery')}</button>
            <button type="button" class="btn btn-danger option-clear">{:lang('batch_clear')}</button>
        </div>
    </div>

  </div>
   
  <div class="row clearfix">
    <div class="col-md-12 column">
      <table class="table table-striped table-hover ntTable">
        <thead>
        <tr>
            <th align='center'><input type="checkbox"  /> </th>
            <th>&nbsp;  </th>
            <th> {:lang('serial_number')} / {:lang("brand")} / {:lang('name')} </th>
            <th> 角色 </th>
            <th> 非卖品 </th>
            <th> {:lang('status')} </th>
            <th> {:lang('edit')} </th>
            <th> {:lang('number_of_employees')} </th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td align='center'><input type="checkbox"  /></td>
            <td> <img src="../img/pro_icon48.jpg" border="0" width="50px" height="50px"> </td>
            <td> <small>8888 / EXBOM</small> <br />鼠标 </td>
            <td align='center'> 1 </td>
            <td align='center'> - </td>
            <td align='center'> - </td>
            <td> PAULO <br /><small>27/06/2019 12:36:25 </small></td>
            <td class="text-right">
            	<div>
                  <button class='btn btn-sm btn-primary' data-toggle="modal" data-target="#prosModal">简阅</button>
                  <a href="prodetail.html" class='btn btn-sm btn-primary'>{:lang('details')}</a>
                  <a href="proedit.html" class='btn btn-sm btn-primary'>{:lang('edit')}</a>
                  <a href="#" class='btn btn-sm btn-primary'>{:lang("image")}</a>
                  <a href="#" class='btn btn-sm btn-default option-pulloff'>{:lang("off_the_shelf")}</a>
                  <a href="#" class='btn btn-sm btn-default option-del'>{:lang('delete')}</a>
                  <a href="#" class='btn btn-sm btn-default option-recover'>{:lang('recover')}</a>
                  <a href="#" class='btn btn-sm btn-danger option-clear'>{:lang('clear')}</a>
              	</div>
            </td>
          </tr>
 
        </tbody>
      </table>
    </div>
      </div>



  </div>
</div>

<!--弹窗部分 开始-->


<div class="modal fade" id="prosModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width:80%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">产品简阅</h4>
            </div>
            <div class="modal-body">
            

               <div class="row clearfix" style="padding-top:12px">
                    <div class="col-md-12 column">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#home" data-toggle="tab">{:lang('Chinese')}</a>
                            </li>
                            <li>
                                <a href="#home" data-toggle="tab">{:lang('English')}</a>
                            </li>
                            <li>
                                <a href="#home" data-toggle="tab">{:lang('Portuguese')}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            
            
            	<div class="row" style="padding:20px 20px 0px 20px">
                    <div class="col-md-2 text-center">
                        <img src="../img/pro_icon128.jpg" border="0">
                    </div>
                    <div class="col-md-10">
                    	<table class="table table-striped">
                        	<tr>
                            	<td width="20%" class="field-name">{:lang('serial_number')}</td>
                                <td>8888</td>
                            </tr>
                        	<tr>
                            	<td class="field-name">{:lang("brand")}</td>
                                <td>EXBOM</td>
                            </tr>
                        	<tr>
                            	<td class="field-name">{:lang("product_name")}</td>
                                <td>USB鼠标</td>
                            </tr>
                        	<tr>
                            	<td class="field-name">{:lang("introduction")}</td>
                                <td>USB接口鼠标，1200DPI,带蓝光LED </td>
                            </tr>
                        	<tr>
                            	<td class="field-name">所属分类</td>
                                <td>/ 电脑周边 / 键盘、鼠标</td>
                            </tr>
                        </table>
               
                    </div>
                </div>
            	<table class="table table-striped table-hover ntTable" style="padding-top:0">
                	<thead>
                    	<tr>
                            <th>{:lang("model")}</th>
                            <th>{:lang("package")}</th>
                            <th>特征1</th>
                            <th>特征2</th>
                            <th>特征3</th>
                            <th>特征4</th>
                            <th>{:lang("box_measure")}</th>
                            <th>{:lang("description")}</th>
                            <th>{:lang('status')}</th>
                            <th>{:lang("barcode")}</th>
                            <th>{:lang('edit')}</th>
                            <th>{:lang('number_of_employees')}</th>
                        </tr>
                    </thead>
                    <tbody>
                    	<tr>
                        	<td>MS-10</td>
                            <td align="center">1</td>
                            <td>有线</td>
                            <td>USB</td>
                            <td>1200DPI</td>
                            <td>1.2米</td>
                            <td>200 <small class="unit">PCS/CX</small> , 20 <small class="unit">KGS/CX</small> <br> 50x40x30 <small class="unit">CM</small> (0.060 <small class="unit">CBM</small>)</td>
                            <td>混装（黑150，银50）</td>
                            <td>-</td>
                            <td>789123456789</td>
                            <td> PAULO <br /><small>27/06/2019 12:36:25 </small></td>
                            <td class="text-right">
                            	<button type="button" class="btn btn-sm btn-default">{:lang('edit')}</button>
                            </td>
                        </tr>
                    	<tr>
                        	<td>MS-10S</td>
                            <td align="center">1</td>
                            <td>无线</td>
                            <td>USB</td>
                            <td>2000DPI</td>
                            <td>10米</td>
                            <td>200 <small class="unit">PCS/CX</small> , 20 <small class="unit">KGS/CX</small> <br> 50x40x30 <small class="unit">CM</small> (0.060 <small class="unit">CBM</small>)</td>
                            <td>混装（黑150，银50）</td>
                            <td>-</td>
                            <td>789123456789</td>
                            <td> PAULO <br /><small>27/06/2019 12:36:25 </small></td>
                            <td class="text-right">
                            	<button type="button" class="btn btn-sm btn-default">{:lang('edit')}</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{:lang('close')}</button>
            </div>
        </div>
    </div>
</div>
{include file="public/foot"/}